<template>
  <div class="container clearfix">
    <form
      action=""
      class="filter"
    >
      <h2 class="title">
        筛选查询
      </h2>
      <div class="section">
        <span class="tip">
          用户昵称：
        </span>
        <div class="content">
          <el-input
            v-model="search_form.nickname"
            placeholder="请输入内容"
          />
        </div>
      </div>
      <div class="section">
        <span class="tip">
          用户姓名：
        </span>
        <div class="content">
          <el-input
            v-model="search_form.realname"
            placeholder="请输入内容"
          />
        </div>
      </div>
      <div class="section">
        <span class="tip">
          用户手机号：
        </span>
        <div class="content">
          <el-input
            v-model="search_form.username"
            placeholder="请输入内容"
          />
        </div>
      </div>
      <div class="section">
        <span class="tip">
          用户类型：
        </span>
        <el-select
          v-model="search_form.groupVip"
          placeholder="请选择"
        >
          <el-option
            v-for="item in type_arr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <div class="btn-bar">
        <el-button
          type="primary"
          siae="small"
          icon="el-icon-search"
          @click="search_filter()"
        >查询结果</el-button>
      </div>
    </form>
    <div class="data-table">
      <el-table
        v-loading="table_loading"
        :data="tableData"
        border
        height="660"
        align="center"
        style="width: 100%"
      >
        <el-table-column
          prop="userId"
          width="100"
          align="center"
          label="用户ID"
        />
        <el-table-column
          prop="nickname"
          align="center"
          label="用户昵称"
        />
        <el-table-column
          prop="realname"
          align="center"
          label="用户姓名"
        />
        <el-table-column
          prop="username"
          width="120"
          align="center"
          label="手机号"
        />
        <el-table-column
          prop="vip"
          align="center"
          label="用户类型"
        />
        <el-table-column
          prop="joinVIP"
          align="center"
          width="180"
          label="开通会员时间"
        />
        <el-table-column
          prop="parentRealname"
          align="center"
          label="上级姓名"
        />
        <el-table-column
          prop="parentUsername"
          width="120"
          align="center"
          label="上级手机号"
        />
        <el-table-column
          prop="initiateCount"
          align="center"
          label="累计发起拼团"
        />
        <el-table-column
          prop="participationCount"
          align="center"
          label="累计参团数量"
        />
        <el-table-column
          prop="groupCount"
          align="center"
          label="累计成团数量"
        />
        <el-table-column
          prop="writeOffCount"
          align="center"
          label="累计核销次数"
        />
        <el-table-column
          prop="upgradeOrderCount"
          align="center"
          label="累计升单次数"
        />
        <el-table-column
          prop="bindCount"
          align="center"
          label="绑定下级数量"
        />

        <el-table-column
          fixed="right"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              size="small"
              @click="search_detail(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-controller">
      <!-- <el-pagination layout="prev, pager, next"
                     :hide-on-single-page="true"
                     :total="1">
      </el-pagination> -->
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data_total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>
<script>
import { userList } from '../../api/user'
export default {
  data() {
    return {
      table_loading: false,
      input: '',
      type_arr: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 0,
          label: '普通用户'
        },
        {
          value: 1,
          label: '会员'
        }
      ],
      value: '',
      tableData: [],
      page: 1,
      pageSize: 10,
      page_total: 1,
      data_total: 0,
      model: 0, // 0 初次加载   1表示条件筛选
      search_form: {
        username: '',
        realname: '',
        nickname: '',
        groupVip: null
      },
    }
  },
  //新加路由保存参数
  beforeRouteLeave(to, from, next) {
    // const answer = window.confirm("当前页面搜索条件将会被保存");
    //更新 put
    let keyname = this.$route.name;
    let value = JSON.stringify(this.search_form);
    sessionStorage.setItem(keyname, value);
    next();
  },

  mounted() {
    if (sessionStorage.getItem(this.$route.name)) {
      this.search_form = JSON.parse(sessionStorage.getItem(this.$route.name));
    }
    this.search_filter()
  },
  methods: {
    //筛选
    search_filter() {
      this.page = 1
      this.model = 1
      this.get_list({
        'pageNum': this.page,
        'pageSize': this.pageSize,
        'username': this.search_form.username,
        'realname': this.search_form.realname,
        'nickname': this.search_form.nickname,
        'groupVip': this.search_form.groupVip
      })
    },
    // 获取列表
    get_list(options = {
      'pageNum': this.page,
      'pageSize': this.pageSize,
      'username': this.search_form.username,
      'realname': this.search_form.realname,
      'nickname': this.search_form.nickname,
      'groupVip': this.search_form.groupVip
    }) {
      if (this.model === 0) {
        options = {
          'pageNum': this.page,
          'pageSize': this.pageSize
        }
      }
      this.table_loading = true
      userList(options).then((result) => {
        const res = result.data
        this.table_loading = false
        if (res.code === 0) {
          if (res.data.list) {
            res.data.list.forEach(item => {
              if (item.groupVipAt) {
                item.joinVIP = new Date(item.groupVipAt * 1000).format('yyyy-MM-dd hh:mm:ss')
              } else {
                item.joinVIP = ''
              }
            })
          }
          this.data_total = res.data.count
          this.page_total = Math.ceil(res.data.count / this.pageSize)

          this.tableData = res.data.list
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.table_loading = false
        this.$message.error(err)
      })
    },
    // 查看详情
    search_detail(row) {
      this.$router.push({
        path: '/user_detail',
        query: {
          user_id: row.userId
        }
      })
    },
    // 编辑
    rewrite(row) {
    },
    // 删除
    delete_item(row) {
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
      this.get_list()
    },
    handleCurrentChange(val) {
      this.page = val
      this.get_list()
    },
  }

}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .filter {
    margin: 20px;
    background-color: #fff;
    box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    .title {
      font-size: 16px;
    }
    .section {
      display: inline-block;
      vertical-align: middle;
      margin-right: 20px;
      margin-top: 16px;
      .tip {
        font-size: 14px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }
      .content {
        display: inline-block;
        vertical-align: middle;
      }
      .inp {
        display: inline-block;
        vertical-align: middle;
        border: none;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 6px;
      }
    }
    .btn-bar {
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }
  .data-table {
    margin: 20px;
    background-color: #fff;
    box-sizing: border-box;
  }
  .page-controller {
    float: right;
    margin-right: 20px;
  }
}
</style>

